<template>
  <el-container>
    <el-header class="sa-header">
      <div class="sa-title sa-flex sa-row-between">
        <div class="label sa-flex">
          <span class="left">商品服务</span>
          <search-condition
            :conditionLabel="filterParams.conditionLabel"
            @deleteFilter="deleteFilter"
          ></search-condition>
        </div>
        <div>
          <el-button
            class="sa-button-refresh"
            icon="RefreshRight"
            @click="getData(1)"
          ></el-button>
          <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>
          <el-button v-auth="'seller.admin.tag.add'" type="primary" icon="Plus" @click="add">新建</el-button>
        </div>
      </div>
    </el-header>
    <el-main class="sa-p-0" v-loading="table.loading">
      <el-table class="sa-table" height="100%" :data="table.data" stripe>
        <template #empty>
          <sa-empty />
        </template>
        <el-table-column prop="id" label="ID" align="center"/>
        <el-table-column prop="tag_name" label="标签名称"  align="center" show-overflow-tooltip />
        <el-table-column prop="status" label="状态"  align="center">
          <template #default="scope">
            <el-button v-auth="'shop.admin.goods.skuprice.edit'" link>
              <el-dropdown popper-class="goods-dropdown" @command="handleSkuCommand">
                <el-tag :type="statusList.color[scope.row.status]">
                  <span>{{ scope.row.status==0?'禁用':'启用' }}</span>
                  <el-icon class="sa-m-l-4">
                    <ArrowDown />
                  </el-icon>
                </el-tag>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      :command="{
                                    id: scope.row.id,
                                    type: '1',
                                  }"
                    >
                      <span class="status-up">启用</span>
                    </el-dropdown-item>
                    <el-dropdown-item
                      :command="{
                                    id: scope.row.id,
                                    type: '0',
                                  }"
                    >
                      <span class="status-down">禁用</span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template #default="scope">
            <el-button
              class="is-link"
              type="primary"
              v-auth="'seller.admin.tag.edit'"
              @click="edit(scope.row)"
            >编辑
            </el-button>
            <el-popconfirm
              width="fit-content"
              confirm-button-text="确认"
              cancel-button-text="取消"
              title="确认删除这条商品?"
              @confirm="deleteRow(scope.row)"
            >
              <template #reference>
                <el-button
                  class="is-link"
                  type="primary"
                  v-auth="'seller.admin.tag.delete'"
                >删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <sa-view-bar>
      <template #right>
        <sa-pagination :pageData="pageData" @updateFn="getData" />
      </template>
    </sa-view-bar>
  </el-container>
</template>

<script setup>
  import { onMounted, reactive } from 'vue';
  import { usePagination, useModal } from '@/sheep/hooks';
  import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
  import { composeFilter } from '@/sheep/utils';
  import { useRoute } from 'vue-router';
  import { api } from './tag.service';
  import { cloneDeep } from 'lodash';
  import Edit from './edit.vue';
  import { ElMessage } from 'element-plus';

  const emit = defineEmits(['modalCallBack']);

  const table = reactive({
    loading: false,
    data: [],
  });

  const statusList = reactive({
    color: ['danger','success'],
  });

  const filterParams = reactive({
    tools: {
      keyword: {
        type: 'tinput',
        field: 'keyword',
        value: '',
        label: '服务名称',
        placeholder: '请输入查询内容',
      },
    
      status: {
        type: 'tselect',
        label: '产品状态',
        field: 'status',
        value: '',
        options: {
          data: [
            {
              label: '全部',
              value: '',
            },
            {
              label: '启用',
              value: '1',
            },
            {
              label: '禁用',
              value: '0',
            },
          ],
        },
      },
      time: {
        type: 'tdatetimerange',
        label: '创建时间',
        field: 'time',
        value: [],
      },
    },
    data: {
      keyword: '',
      categoryId: '',
      apply: '',
      create_people: '',
      status: '',
      time: [],
    },
    conditionLabel: {},
  });

  const { pageData } = usePagination();

  onMounted(() => {
    getData();
  });

  const add = () => {
    useModal(
      Edit,
      {
        title: '新增标签',
        type: 'add',
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  };

  const edit = (row) => {
    useModal(
      Edit,
      {
        title: '编辑标签',
        type: 'edit',
        id: row.id,
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  };

 

  const getData = async (page) => {
    table.loading = true;
    if (page) pageData.page = page;
    let tempSearch = cloneDeep(filterParams.data);
    const { error, data } = await api.list({
      page: pageData.page,
      list_rows: pageData.list_rows,
      apply: tempSearch.apply,
      categoryId: tempSearch.categoryId,
      create_people: tempSearch.create_people,
      keyword: tempSearch.keyword,
      status: tempSearch.status,
      start_time: tempSearch.time[0] || '',
      end_time: tempSearch.time[1] || '',
    });
    table.loading = false;
    if (error === 0) {
      table.data = data.data;
      pageData.page = data.current_page;
      pageData.list_rows = data.per_page;
      pageData.total = data.total;
    }
  };

  const { openFilter, deleteFilter } = useSearch({ filterParams, getData });

  // 更改商品状态
  const handleSkuCommand = async (e) => {
    console.log(e)
    await api.edit(e.id,{  status: e.type });
    await getData();
  };

  const deleteRow = async (row) => {
    const { error } = await api.delete(row.id);
    if (error === 0) {
        
        ElMessage({
          type: 'success',
          message:'删除成功'
        });
      await getData(1);
    }
  };
</script>
<style>
</style>